<template>
  <div>
    <van-nav-bar
      title="播放歌曲"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="player_con" :class="{playing:isPlaying}">
          <img src="../../../assets/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="../../../assets/disc.png" class="disc autoRotate" />
          <img :src="musicCover" class="cover autoRotate" />
    </div>
    <div class="audio_con">
      <audio @play="play" @pause="pause" :src="MusicUrl" controls autoplay loop class="myaudio"></audio>
    </div>
     <div class="comment_wrapper">
        <h5 class='title'>热门留言</h5>
        <div class='comment_list'>
          <dl v-for="item in hotComments" :key="item">
            <dt><img :src="item.user.avatarUrl" alt=""></dt>
            <dd class="name">{{item.nickname}}</dd>
            <dd class="detail">
              {{item.content}}
            </dd>
          </dl>
        </div>
    </div>
  </div>
</template>

<script>


export default {
  //   props: ["MusicUrl"],
  data() {
    return {
      MusicUrl: "",
      musicCover:"",
      hotComments:[],
      isPlaying:false,
    };
  },
  created() {
    this.playMusic();
  },
  methods: {
    playMusic() {
      //   console.log(musicId);
      this.$request("get", "/song/url?id=" + this.$route.params.id).then(
        (res) => {
          // console.log(res);
          if (res.code == 200) {
            this.MusicUrl = res.data[0].url;
          }
        }
      );
      this.$request("get","/song/detail?ids="+this.$route.params.id)
      .then((res)=>{
          // console.log(res)
          this.musicCover = res.songs[0].al.picUrl;

      });
      this.$request("get","/comment/hot?type=0&id="+this.$route.params.id)
      .then((res)=>{
        // console.log(res)
        this.hotComments = res.hotComments;
        console.log(this.hotComments)
      })
    },
    onClickLeft() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    },
     play:function(){
    this.isPlaying = true;
    // console.log(play)
        },
     pause:function(){
    this.isPlaying = false;
    // console.log(pause)
        },
  }, 
};

</script>

<style scoped>
.player_con {
  height: 370px;
}

/* 播放杆 转回去 */
.player_con.playing .play_bar {
  transform: rotate(0);
}
.disc {
  position: absolute;
  left: 92px;
  top: 120px;
  z-index: 9;
}
/* 旋转的类名 */
.autoRotate {
  animation-name: Rotate;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-timing-function: linear;
  animation-duration: 5s;
}
.cover {
  position: absolute;
  left: 145px;
  top: 172px;
  width: 150px;
  height: 150px;
  border-radius: 75px;
  z-index: 8;
}
.myaudio {
  border-radius:6px ;
  width: 400px;
  height: 30px;
  margin-top: 5px;
  outline: none;
  background-color: #f1f3f4;
}

.comment_wrapper .title {
  position: absolute;
  top: 0;
  margin-top: 10px;
}
.comment_wrapper .comment_list {
  overflow: auto;

}
.comment_wrapper .comment_list::-webkit-scrollbar {
  display: none;
}
.comment_wrapper dl {
  padding-top: 10px;
  padding-left: 55px;
  position: relative;
  margin-bottom: 20px;
}

.comment_wrapper dt {
  position: absolute;
  left: 20px;
  top: 2px;
}

.comment_wrapper dt img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}

.comment_wrapper dd {
  font-size: 12px;
}
/* 旋转的动画 */
@keyframes Rotate {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}
/* 旋转的类名 */
.autoRotate {
  animation-name: Rotate;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-timing-function: linear;
  animation-duration: 5s;
}
/* 是否正在播放 */
.player_con.playing .disc,
.player_con.playing .cover {
  animation-play-state: running;
}

.play_bar {
  left: 200px;
  top: -10px;
  z-index: 10;
  transform: rotate(-25deg);
  transform-origin: 12px 12px;
  transition: 1s;
}
/* 播放杆 转回去 */
.player_con.playing .play_bar {
  transform: rotate(0);
}

</style>